import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./assets/styles/base.css" //基础样式
import "./assets/styles/el-reset.css" //全局重设element-ui的样式
//完整引入
import ElementUI from 'element-ui';//element核心文件
import 'element-ui/lib/theme-chalk/index.css';//element的css文件
//引入基于elementui二次封装的一个菜单
import qfSubMenu from "qf-sub-menu"

Vue.use(ElementUI);//将element注入到全部的子组件
Vue.use(qfSubMenu)

// Vue.config.productionTip = false;

//全局前置钩子 beforeEach
//前置守卫 路由守卫

//判断本地有没有存储token 如果存储了 说明登入了=>自由访问页面

//如果没有token =>没登入 不允许访问login以外的页面

router.beforeEach(function (to, from, next) {
  //获取本地存储的token
  let token = localStorage.getItem('yf-token')
  // //to是去哪个页面
  // console.log('to==', to)
  // //from 从哪个页面来
  // console.log('from==',from)
  // //next 放行
  // next()
  if (token) {
    //登入之后才能获取用户的菜单,在这里获取菜单的目的就是为了刷新页面或者进入页面的时候 数据丢失的问题
    //判断vuex中sideMenu是否有长度 没有就要重新获取
    if (!store.state.sideMenu.length) {
      store.dispatch("FETCH_MENULIST")
        .then(() => {
          //这里要注意, next里面要传参数即要进入的页面的路由信息，因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
          next({ path: to.path })
        })
    }else {
      next()
    }
  } else {
    //没有token的时候 没登入 只让访问登入页
    //判断访问的是不是登入页
    if (to.path === "/login") {
      //访问的是login 放行
      next()
    } else {
      //访问的不是login 重新跳转到登入页
      next({ path: "/login" })
    }
  }
})

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
